<template>
  <div class="content">
    <Crud :tbColumns="tbColumns" ref="crud" title="线路" :baseUrl="baseUrl" :refreshUrl="refreshUrl" :toolbarHidden="toolbarHidden"
      @editChange="onEditChange">
      <template slot="formItems" slot-scope="{record}">
        <a-row :gutter="24">
          <a-col :span="12" v-if="isEdit">
            <a-form-item label="编号" v-bind="formItemLayout">
              <a-input-number :disabled="isEdit" placeholder="请输入编号" @change="(val)=>record['id'] = val" style="width:100%"
                v-decorator="['id', {initialValue: record.id, rules: [{ required: true, type: 'integer', message: '编号为整数'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="名称" v-bind="formItemLayout">
              <a-input placeholder="请输入名称" @change="(val)=>record['name'] = val.target.value"
                v-decorator="['name', {initialValue: record.name, rules: [{ required: true,  message: '名称不能为空', whitespace: false}]}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="所属组织" v-bind="formItemLayout">
              <a-tree-select placeholder="请选择所属组织" :loadData="onLoadData" :treeData="treeData"
                :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }" @change="(value, label)=>record['region'] = {id : value, name : label[0] }"
                v-decorator="['region', {initialValue: getValueOfObj(record.region), rules: [{ required: true,  message: '所属组织不能为空', whitespace: false}]}]">
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="电压等级" v-bind="formItemLayout">
              <a-select style="width: 100%" showSearch placeholder="请选择电压等级"
                @change="(val)=>record.baseVoltage = baseVoltageList.find(v => v.id === val)"
                v-decorator="['baseVoltage', {initialValue: getValueOfObj(record.baseVoltage) }]">
                <a-select-option v-for="item in baseVoltageList" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="总长度(km)" v-bind="formItemLayout">
              <a-input-number placeholder="请输入总长度" @change="(val)=>record['totalLen'] = val" style="width:100%" :precision="2"
                v-decorator="['totalLen', {initialValue: record.totalLen}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="架空长度(km)" v-bind="formItemLayout">
              <a-input-number placeholder="请输入架空长度" @change="(val)=>record['overheadLen'] = val" style="width:100%" :precision="2"
                v-decorator="['overheadLen', {initialValue: record.overheadLen}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="架空线径(mm²)" v-bind="formItemLayout">
              <a-input-number placeholder="请输入架空线径" @change="(val)=>record['overheadSection'] = val" style="width:100%" :precision="2"
                v-decorator="['overheadSection', {initialValue: record.overheadSection}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="电缆长度(km)" v-bind="formItemLayout">
              <a-input-number placeholder="请输入电缆长度" @change="(val)=>record['cableLen'] = val" style="width:100%" :precision="2"
                v-decorator="['cableLen', {initialValue: record.cableLen}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="电缆线径(mm²)" v-bind="formItemLayout">
              <a-input-number placeholder="请输入电缆线径" @change="(val)=>record['cableSection'] = val" style="width:100%" :precision="2"
                v-decorator="['cableSection', {initialValue: record.cableSection}]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="电缆型号" v-bind="formItemLayout">
              <a-input placeholder="请输入电缆型号" @change="(val)=>record['cableModel'] = val.target.value"
                v-decorator="['cableModel', {initialValue: record.cableModel}]" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item v-bind="formItemLayout" style="padding-top: 30px;">
              <a-checkbox v-decorator="['disable', {initialValue: record.disable }]" @change="(e)=>record['disable'] = e.target.checked">禁用
              </a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>

      </template>
    </Crud>
  </div>

</template>

<script>
import Crud from '@/components/container/Crud';
import CrudMixin from '@/components/container/CrudMixin.js';
import treeApi from '@/api/tree';

export default {
  name: 'lineCrud',
  components: { Crud },
  mixins: [CrudMixin],
  props: {
    toolbarHidden: { type: Boolean, default: false }
  },

  data() {
    return {
      refreshUrl: 'region/{id}/lines',
      baseUrl: 'line/',
      tbColumns: [
        { title: '名称', dataIndex: 'name', fixed: 'left', width: 120 },
        { title: '所属组织', dataIndex: 'region.name', width: 120 },
        { title: '电压等级', dataIndex: 'baseVoltage.name', width: 80 },
        { title: '总长度(km)', dataIndex: 'totalLen', width: 100 },
        { title: '架空长度(km)', dataIndex: 'overheadLen', width: 100 },
        { title: '架空线径(mm²)', dataIndex: 'overheadSection', width: 100 },
        { title: '电缆长度(km)', dataIndex: 'cableLen', width: 100 },
        { title: '电缆线径(mm²)', dataIndex: 'cableSection', width: 100 },
        { title: '电缆型号', dataIndex: 'cableModel', width: 80 },
        { title: '停用', dataIndex: 'disable', scopedSlots: { customRender: 'disable' } }
      ],
      treeData: [],
      formRules: {},
      baseVoltageList: Object.keys(this.$enum.BaseVoltage).map(key => this.$enum.BaseVoltage[key])
    };
  },

  mounted() {
    this.treeLoad();
  },

  methods: {
    treeLoad() {
      treeApi.loadTreeByRoot('/region').then(res => {
        this.treeData = this.insertIconAndValue(res.data);
      });
    },
    onLoadData(treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        let data = treeNode.dataRef;
        let params = { id: data.id, level: data.clz };
        treeApi.loadTreeByParent('/region', params).then(res => {
          treeNode.dataRef.children = this.insertIconAndValue(res.data);
          this.treeData = [...this.treeData];
          resolve();
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
a {
  vertical-align: middle;
}
</style>
